<template>
  <a-spin :spinning="loading">
    <a-card>
      <section slot="title">订单管理</section>
      <section v-if="$permissionJudge('OrderQuery')">
        <a-row :gutter="16">
          <a-col :span="8">
            <span class="label">订单号：</span>
            <a-input :max-length="100" @keyup.enter="search" allow-clear v-model="orderId" placeholder="请输入订单号" />
          </a-col>
          <a-col :span="8">
            <span class="label">承租人：</span>
            <a-input
              :max-length="100"
              @keyup.enter="search"
              allow-clear
              v-model="travellerName"
              placeholder="请输入承租人姓名"
            />
          </a-col>
          <a-col :span="8">
            <a-button class="ml-18" type="primary" @click="search">查询</a-button>
            <a-button class="mx-8" @click="reset">重置</a-button>
            <a href="javascript:;" @click="isExpand = !isExpand">{{ isExpand ? '收起' : '展开' }}</a>
          </a-col>
          <a-col :span="8">
            <span class="label">联系方式：</span>
            <a-input :max-length="100" @keyup.enter="search" allow-clear v-model="phone" placeholder="请输入联系方式" />
          </a-col>
          <a-col :span="8">
            <span class="label">来源渠道：</span>
           <!-- <a-select @change="search" class="w-full" allow-clear v-model="channelId" placeholder="请选择来源渠道">
              <a-select-option v-for="item in channelList" :value="item.id" :key="item.id">{{
                item.name
              }}</a-select-option>
            </a-select> -->
			<sourceChannel placeholder="请选择来源渠道"
              v-model="channelId" ref="channel" NewisShow="true"
              :options="{ allowClear: true }"
              @change="search" class="flex-1 overflow-hidden" />
          </a-col>
          <a-col :span="8">
            <span class="label">创建日期：</span>
            <a-range-picker @change="search" v-model="createTimeArr" class="w-full" placeholder="请选择创建日期" />
          </a-col>
        </a-row>
        <a-row :gutter="16" v-show="isExpand">
          <a-col v-bind="colSpan">
            <span class="label">服务商：</span>

          <a-select
              allow-clear
              show-search
              labelInValue
              @change="search"
              v-model="vendorId"
              class="w-full"
              placeholder="请选择服务商"
              :loading="selectConfig.searchLoading"
              @focus="focus"
             @search="searchData"
             :filter-option="filterOption"
             @popupScroll="popupScroll"
            >
              <a-select-option v-for="item in vendorList" :value="item.id" :key="item.id">{{
                item.name
              }}</a-select-option>
          
            </a-select>
          </a-col>
          <a-col v-bind="colSpan">
            <span class="label">门店：</span>
            <!-- <a-select @change="search" class="w-full" allow-clear v-model="storeId" placeholder="请选择门店">
              <a-select-option v-for="item in storeList" :value="item.id" :key="item.id">{{
                item.name
              }}</a-select-option>
            </a-select> -->
			<newStoreList   placeholder="请选择门店"
              v-model="storeId"
              :options="{ allowClear: true }"
              @change="search" class="flex-1 overflow-hidden"/>
          </a-col>
          <a-col v-bind="colSpan">
            <span class="label">车型选择：</span>
            <!--<a-select @change="search" class="w-full" allow-clear v-model="vehicleTypeId" placeholder="请选择车型">-->
            <!--<a-select-option v-for="item in vehicleTypeList" :value="item.vehicleTypeId" :key="item.id">-->
            <!--{{ `${item.vehicleTypeId}/${item.name}/${$utils.getEnumName(transmissionTypeEnums,-->
            <!--item.transmissionType)}/${item.groupName}/${item.outputVolumn + item.outputType}/${item.passengerNum}座/${item.modelYear}款` }}-->
            <!--</a-select-option>-->
            <!--</a-select>-->
            <SelectVehicleType
              class="flex-1 overflow-hidden"
              placeholder="请选择车型"
              v-model="vehicleTypeId"
              :options="{ allowClear: true }"
              @change="search"
            />
          </a-col>
          <a-col v-bind="colSpan">
            <span class="label">订单状态：</span>
            <a-select @change="statusChange" v-model="status" class="w-full" allow-clear placeholder="请选择状态">
              <a-select-option v-for="item in orderStatusEnums" :value="item.value" :key="item.value">{{
                item.name
              }}</a-select-option>
            </a-select>
          </a-col>
          <a-col v-bind="colSpan">
            <span class="label">城市：</span>
            <SelectCity
              class="w-full"
              placeholder="请选择城市"
              :options="{ allowClear: true }"
              v-model="cityId"
              @change="search"
            />
          </a-col>
          <a-col v-bind="colSpan">
            <span class="label">上门服务：</span>
            <a-button-group>
              <a-button
                class="mr-1"
                :ghost="!isPickupOnDoor"
                @click="
                  isPickupOnDoor = undefined
                  search()
                "
                :type="!isPickupOnDoor ? 'primary' : 'default'"
                >全部
              </a-button>
              <a-button
                :ghost="isPickupOnDoor"
                @click="
                  isPickupOnDoor = true
                  search()
                "
                :type="isPickupOnDoor ? 'primary' : 'default'"
                >上门服务
              </a-button>
            </a-button-group>
          </a-col>
          <a-col v-bind="colSpan">
            <span class="label">预计取车：</span>
            <a-range-picker
              @change="search"
              v-model="reservingPickupTimeArr"
              class="w-full"
              placeholder="请选择预计取车时间"
            />
          </a-col>
          <a-col v-bind="colSpan">
            <span class="label">实际取车：</span>
            <a-range-picker
              @change="search"
              v-model="realityPickupTimeArr"
              class="w-full"
              placeholder="请选择实际取车时间"
            />
          </a-col>
          <a-col v-bind="colSpan">
            <span class="label">免押类型：</span>
            <a-select @change="search" v-model="creditSupport" class="w-full" allow-clear placeholder="请选择免押类型">
              <a-select-option :value="true">双免</a-select-option>
              <a-select-option :value="false">无</a-select-option>
            </a-select>
          </a-col>
          <a-col v-bind="colSpan">
            <span class="label">预计还车：</span>
            <a-range-picker
              @change="search"
              v-model="reservingReturnTimeArr"
              class="w-full"
              placeholder="请选择预计还车时间"
            />
          </a-col>
          <a-col v-bind="colSpan">
            <span class="label">实际还车：</span>
            <a-range-picker
              @change="search"
              v-model="realityReturnTimeArr"
              class="w-full"
              placeholder="请选择实际还车时间"
            />
          </a-col>
					 <a-col >
							    <span class="label">渠道订单号：</span>
							    <a-input
							      :max-length="100"
							      @keyup.enter="search()"
							      allow-clear
							      v-model="channelOrderNo"
							      placeholder="请输入渠道订单号"
							    />
							  </a-col>
        </a-row>
      </section>
      <a ref="download" href="javascript:;" />
      <section class="flex items-center">
        <a-button v-if="$permissionJudge('OrderSettle')" type="primary" icon="plus" @click="$refs.settlement.open()"
          >结算</a-button
        >
        <a-button
          v-if="$permissionJudge('OrderExport')"
          class="ml-10 border-5"
          type="primary"
          ghost
          @click="exportTable"
          >导出订单</a-button
        >
      </section>
      <a-table
        class="mt-16 order-table"
        :columns="columns"
        :data-source="data"
        :scroll="scroll"
        :pagination="pagination"
        ><template #id="id, data">
          <!-- <section class="mb-4" style="color:#1890FF;">{{ data.channelName || '门店下单' }}</section> -->
          <a-tag color="#1890FF" class="text-12">{{ data.channelName || '门店下单' }}</a-tag>
          <section class="order-no">
            <a href="javascript:;" @click="viewOrderInfo(data)">{{ id }}</a>
          </section>
          <section class="my-4 text-gray text-12">创建时间：</section>
          <section class="text-gray text-12">{{ data.createTime }}</section>
        </template>
        <section class="text-333 font-bold" slot="travellerName" slot-scope="travellerName, data">
          <section>
            {{ travellerName }}
            <span v-if="data.isNewCustomer" style="color: #078e00">(新客)</span>
          </section>
          <section class="mt-4">{{ data.phone }}</section>
        </section>
        <section class="font-bold" slot="estimatedPickupAndReturnTime" slot-scope="val, data">
          <section class="flex items-center">
            <section class="tag orange-bg">预取</section>
            <section class="orange-color">{{ data.reservingPickupTime | formatTime }}</section>
          </section>
          <section class="my-6 flex items-center">
            <section class="tag grey-bg">预还</section>
            <section class="text-666">{{ data.reservingReturnTime | formatTime }}</section>
          </section>
          <section class="primary-color">{{ data.realRentHours | formatHours }}</section>
        </section>
        <section slot="vehicleDesc" slot-scope="vehicleDesc, data">
          <section v-if="data.vehicleLicenceNum" class="vehicle-num primary-bg mb-6">
            {{ data.vehicleLicenceNum }}
          </section>
          <section>{{ vehicleDesc }}</section>
        </section>
        <template #pickupStore="val, data">
            <template >
                <section v-if="data.pickupArrivalType===1"
                         class="tag orange-bg inline-block">上门取车</section>
                <section v-if="data.pickupArrivalType===2"
                         class="tag orange-bg inline-block">门店取车</section>
                <section v-if="data.pickupArrivalType===3"
                         class="tag orange-bg inline-block">店员接送</section>
            </template>
          <section class="my-4 text-333 font-bold">{{ data.pickupStoreName }}</section>
          <section class="text-12">
            {{ data.pickupAddress }} <img @click="setMapPoint(data)" src="@/assets/icons/pin2.png" alt="" />
          </section>
        </template>
        <template #returnStore="val, data">
            <template >
                <section v-if="data.returnArrivalType===1"
                         class="tag orange-bg inline-block">上门取车</section>
                <section v-if="data.returnArrivalType===2"
                         class="tag orange-bg inline-block">门店取车</section>
                <section v-if="data.returnArrivalType===3"
                         class="tag orange-bg inline-block">店员接送</section>
            </template>
          <section class="my-4 text-333 font-bold">{{ data.returnStoreName }}</section>
          <section class="text-12">
            {{ data.returnAddress }} <img @click="setMapPoint(data, 'return')" src="@/assets/icons/pin2.png" alt="" />
          </section>
        </template>
        <template #vendorName="vendorName, data">
          <!--          <img :src="data.vendorLogo || '/avatar.png'" alt="" class="vendor-logo">-->
          <section>{{ vendorName }}</section>
        </template>
        <template #orderPrice="val, data">
          <a-tooltip placement="topLeft">
            <!-- <a-tooltip
            :title="`本单差价：${
              data.actualFee - data.totalActualFee > 0
                ? `+${(data.actualFee * 100 - data.totalActualFee * 100) / 100}`
                : (data.actualFee * 100 - data.totalActualFee * 100) / 100
            }元`"
          > -->
            <!-- <section slot="title"> -->
            <section>采购价：{{ data.totalActualFee }}</section>
            <section>展示价：{{ data.totalFee }}</section>
            <section class="font-bold">支付价：{{ data.actualFee }}</section>
            <!-- </section> -->
            <!-- <section class="font-bold error-color text-16">￥{{ data.totalFee }}</section> -->
          </a-tooltip>
        </template>
        <template #status="val, data">
          <section :style="{ color: colorMap[data.status] }">{{ data.statusName }}</section>
          <section v-if="data.status === 3">
            <section class="tag error-bg inline-block" v-if="data.isExpire">到期</section>
            <section class="tag orange-bg inline-block" v-else-if="data.isRenewal">续租</section>
          </section>
        </template>
        <template #action="val, data">
          <section v-if="data.status !== 1" class="flex items-center justify-end">
            <section>
              <a v-if="$permissionJudge('OrderQuery')" class="block" href="javascript:;" @click="viewOrderInfo(data)"
                >订单明细</a
              >
              <a
                v-if="(data.status === 2||data.status==7) && $permissionJudge('OrderCancel')"
                href="javascript:;"
                class="block error-color"
                @click="cancelOrder(data)"
                >取消订单</a
              >
            </section>
            <a-divider style="height: 70px; margin: 0 8px 0 10px" type="vertical" />
            <section class="action">
              <a
                v-if="$permissionJudge('CustomerComplaintsManage')"
                href="javascript:;"
                class="block"
                @click="viewCustomerComplaint(data)"
                >查看客诉</a
              >
              <a
                v-if="$permissionJudge('CustomerComplaintsProcessing')"
                href="javascript:;"
                class="block"
                @click="addCustomerComplaint(data)"
                >新增客诉</a
              >
              <a v-if="$permissionJudge('OrderQuery')" href="javascript:;" class="block" @click="viewLog(data)"
                >订单日志</a
              >
            </section>
          </section>
        </template>
      </a-table>
    </a-card>
    <Log ref="log" :type="4">
      <section slot="title" class="title">
        <section>订单日志</section>
        <section class="dot" />
        <section>{{ currOrder.id }}</section>
      </section>
    </Log>
    <OrderDetails ref="orderDetails" />
    <CancelOrder ref="cancelOrder" @success="getData" />
    <Settlement ref="settlement" @success="getData" />
    <AddressComp ref="map" />
  </a-spin>
</template>
<script>
import colorMap from './colorMap'
import OrderDetails from './OrderDetails'
import CancelOrder from './CancelOrder'
import Settlement from '../order-settlement/Settlement'
import SelectVehicleType from '@/components/SelectVehicleType'
import newStoreList from '@/components/storeList'
import sourceChannel from '@/components/sourceChannel'
import AddressComp from './AddressComp'
import { tableMixins } from '@/utils/mixins'
import {
    getOrderList,
    exportOrder, exportOrderNew
} from '@/api/order/order-manage'
import { getAllVendors } from '@/api/vendor'
import { getAllStores } from '@/api/store'
import { searchVendor} from '@/api/vendor'
import { debounce} from 'lodash'
export default {
	name: 'OrderManage',
	components: {
		OrderDetails,
		CancelOrder,
		Settlement,
    SelectVehicleType,
    AddressComp,
	newStoreList,
	sourceChannel
	},
	mixins: [tableMixins],
	data() {
		return {
			loading: false,
			detailsLoading: false,
			confirmLoading: false,
			isExpand: false,
			loadedSearchData: false,
			showReservationInfoModal: false,
			showOrderModal: false,
			// 搜索参数
			storeId: undefined,
			orderId: '',
			travellerName: '',
			phone: '',
			channelId: undefined,
			vendorId: undefined,
			channelOrderNo: '',
			status: undefined,
			createTimeArr: [undefined, undefined],
			cityId: '',
			isPickupOnDoor: undefined,
			reservingPickupTimeArr: [undefined, undefined],
			realityPickupTimeArr: [undefined, undefined],
			pickupStoreName: '',
			reservingReturnTimeArr: [undefined, undefined],
			realityReturnTimeArr: [undefined, undefined],
			returnStoreName: '',
			creditSupport: undefined,
			pickupTabSearch: undefined,
			returnTabSearch: undefined,
			// 搜索参数 end
			currOrder: {},
			colorMap,
			orderStatusEnums: [],
			colSpan: {
				xl: 12,
				xxl: 8
			},
			channelList: [],
			vendorList: [],
			vehicleTypeList: [],
			cityData: [],
			storeList: [],
			transmissionTypeEnums: [],
      selectConfig:{
        searchKey: '',
        searchLoading: false,
        data: [],
        total:0,
        pageNum:1,
        rowsNum:10,
      },
			columns: [
				{title: '订单号', dataIndex: 'id', width: 140, scopedSlots: {customRender: 'id'}},
				{
					title: '承租人',
					dataIndex: 'travellerName',
					width: 120,
					scopedSlots: {customRender: 'travellerName'},
				},
				{
					title: '服务商',
					dataIndex: 'vendorName',
					width: 100,
					scopedSlots: {customRender: 'vendorName'},
				},
				{
					title: '预定时间',
					dataIndex: 'estimatedPickupAndReturnTime',
					width: 200,
					scopedSlots: {customRender: 'estimatedPickupAndReturnTime'}
				},
				{
					title: '服务车辆',
          width: 240,
					dataIndex: 'vehicleDesc',
					scopedSlots: {customRender: 'vehicleDesc'}
				},
				{title: '取车门店', dataIndex: 'pickupStore', width: 200, scopedSlots: {customRender: 'pickupStore'}},
				{title: '还车门店', dataIndex: 'returnStore', width: 200, scopedSlots: {customRender: 'returnStore'}},
				{
					title: '订单金额',
					dataIndex: 'orderPrice',
						width: 70,
					scopedSlots: {customRender: 'orderPrice'},
				},
				{title: '订单状态', dataIndex: 'status', width: 70, scopedSlots: {customRender: 'status'}},
				{
					title: '操作',
					fixed: 'right',
					dataIndex: 'action',
					width: 160,
					scopedSlots: {customRender: 'action'},
					align: 'center'
				}
			],
			data: [],
			exportPath: false
		}
	},
	computed: {
		scroll() {
			return {x: this.data.length === 0 ? undefined : 1500}
		}
	},
	watch: {
		isExpand(val) {
			if (val && !this.loadedSearchData) {
      
				// getAllStores().then(data =>
				//  this.storeList = data
				//  )
				this.loadedSearchData = true
			}
		}
	},
	async created() {
    this.searchData = debounce(this.searchData, 100);
		this.transmissionTypeEnums = await this.$utils.getDictList('TransmissionType')
		this.orderStatusEnums = await this.$utils.getDictList('OrderStatus')
		const params = this.$route.params
    // this.getChannelList()
		if (params.orderId) {
			this.orderId = `${params.orderId}`
		} else if (params.id) {
			this.storeId = params.id
			this.isExpand = true
		}else if(params.channelOrderNo){
			this.channelOrderNo = params.channelOrderNo
			this.isExpand = true
		}
		this.getData()
	},
	methods: {
    filterOption(input, option) {
      return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
    },
    getVendorList(){
      this.selectConfig.searchLoading = true
      searchVendor({
            search: this.selectConfig.searchKey.trim(),
            rowsNum: this.selectConfig.rowsNum,
           pageNum: this.selectConfig.pageNum,
            isEnabled: true
          }).then((data) => {
            this.selectConfig.searchLoading = false
            const {items, rowCount} = data
            this.$nextTick(() => {
              this.vendorList = this.selectConfig.pageNum === 1 ? items : [...this.vendorList.concat(items)]
              this.$forceUpdate()
            })
           
           this.selectConfig.total = rowCount
          }
        ).catch(() => this.selectConfig.searchLoading = false)
    },
    searchData(searchKey) {
			console.log(searchKey,'xxxx')
        this.selectConfig.searchKey = searchKey
        this.selectConfig.pageNum = 1
        this.getVendorList()
      },
    focus() {
        this.selectConfig.searchKey = ''
        this.selectConfig.pageNum = 1
        this.getVendorList()
      },
      popupScroll:debounce (function (e) {
        const {scrollHeight, scrollTop, clientHeight} = e.target
        if (scrollHeight - scrollTop === clientHeight) {
          if (!(this.vendorList.length === this.selectConfig.total)){
            this.selectConfig.pageNum++
            this.getVendorList()
          }
        }
      },500),
		getData() {
			this.loading = true
			getOrderList(this.getSearchParams()).then(data => {
				this.total = data.rowCount
				data.items.forEach(item => {
					item.statusName = this.$utils.getEnumName(this.orderStatusEnums, item.status)
				})
				this.data = data.items
			}).finally(() => this.loading = false)
		},
		search() {
      this.cityId=""+this.cityId
			this.pageNum = 1
			this.getData()
		},
		statusChange() {
			if (this.status === 2) {
				this.realityPickupTimeArr = [undefined, undefined]
				this.realityReturnTimeArr = [undefined, undefined]
			} else if (this.status === 3) {
				this.realityReturnTimeArr = [undefined, undefined]
			}
			this.search()
		},
		cancelOrder(data) {
			this.$refs.cancelOrder.open(data)
		},
		getSearchParams() {
      console.log( this.vendorId);
			return {
				pageNo: this.pageNum,
				phone:this.phone,
				pageSize: this.rowsNum,
				storeId: this.storeId,
				orderId: this.orderId.trim() || undefined,
				channelOrderNo:this.channelOrderNo.trim(),
				travellerName: this.travellerName.trim(),
				channelId: this.channelId,
				vendorId: this.vendorId?this.vendorId.key:undefined,
				vehicleTypeId: this.vehicleTypeId,
				status: this.status,
				cityId: this.cityId,
				createTimeStart: this.$utils.getStartTime(this.createTimeArr[0]),
				createTimeEnd: this.$utils.getEndTime(this.createTimeArr[1]),
				isPickupOnDoor: this.isPickupOnDoor,
				creditSupport: this.creditSupport,
				pickupTabSearch: this.pickupTabSearch,
				returnTabSearch: this.returnTabSearch,
				reservingPickupTimeStart: this.$utils.getStartTime(this.reservingPickupTimeArr[0]),
				reservingPickupTimeEnd: this.$utils.getEndTime(this.reservingPickupTimeArr[1]),
				realityPickupTimeStart: this.$utils.getStartTime(this.realityPickupTimeArr[0]),
				realityPickupTimeEnd: this.$utils.getEndTime(this.realityPickupTimeArr[1]),
				reservingReturnTimeStart: this.$utils.getStartTime(this.reservingReturnTimeArr[0]),
				reservingReturnTimeEnd: this.$utils.getEndTime(this.reservingReturnTimeArr[1]),
				realityReturnTimeStart: this.$utils.getStartTime(this.realityReturnTimeArr[0]),
				realityReturnTimeEnd: this.$utils.getEndTime(this.realityReturnTimeArr[1])
			}
		},
		viewOrderInfo(data) {
			if (!this.$permissionJudge('OrderQuery')) return
			this.$refs.orderDetails.open(data)
		},
    setMapPoint(data, label = 'pickup') {
      this.$refs.map.setMapPoint({
        longitude: data[label + 'Longitude'],
        latitude: data[label + 'Latitude'],
        content: data[label + 'Address']
      })
    },
		// 查看投诉
		viewCustomerComplaint(data) {
			this.$router.push({
				name: 'OrderComplaints',
				params: data
			})
		},
		addCustomerComplaint(data) {
			this.$router.push({
				name: 'OrderComplaints',
				params: {...data, isAdd: true}
			})
		},
    viewLog(data) {
		  this.currOrder = data
      this.$refs.log.open(data.id)
    },
		exportTable() {
			if (this.exportPath) return false
			this.exportPath = true
            exportOrderNew(this.getSearchParams()).then(res => {
                console.log(`res`,res)
                this.dataURLtoDownload(res.base64, res.name)
				// if (res.domain) {
				// 	this.$refs.download.href = res.domain + res.filePath
				// 	setTimeout(() => this.$refs.download.click())
				// } else {
				// 	this.$message.warning('暂无符合条件的数据！')
				// }
			}).finally(() => {
				this.exportPath = false
			})
		},
        dataURLtoDownload(dataurl, name) {
            var bstr = atob(dataurl), //解析 base-64 编码的字符串
                n = bstr.length,
                u8arr = new Uint8Array(n) //创建初始化为0的，包含length个元素的无符号整型数组
            while (n--) {
                u8arr[n] = bstr.charCodeAt(n) //返回字符串第一个字符的 Unicode 编码
            }
            let blob = new Blob([u8arr], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' }) //转化成blob
            let url = URL.createObjectURL(blob) //这个新的URL 对象表示指定的 File 对象或 Blob 对象
            let a = document.createElement('a') //创建一个a标签
            a.href = url
            a.download = name
            a.click()
            URL.revokeObjectURL(a.href) //释放之前创建的url对象
        },
		reset() {
			this.orderId = ''
			this.channelOrderNo=''
      this.vendorId=undefined
			this.storeId = undefined
			this.travellerName = ''
			this.phone=''
				this.$refs.channel.getId()
			this.channelId = undefined
			this.vehicleTypeId = undefined
			this.status = undefined
			this.cityId =''
			this.createTimeArr = [undefined, undefined]
			this.isPickupOnDoor = undefined
			this.reservingPickupTimeArr = [undefined, undefined]
			this.realityPickupTimeArr = [undefined, undefined]
			this.reservingReturnTimeArr = [undefined, undefined]
			this.realityReturnTimeArr = [undefined, undefined]
			this.creditSupport = undefined
      console.log(this.cityId);
			this.search()
		},
		getChannelList() {
			this.$utils.getChannel().then(data => {
				this.channelList = data
			})
		},
	}
}
</script>
<style lang="less" scoped>
@orange: #faad14;
@blue: #1890ff;
@purple: #722ed1;
@lightCyan: #13c2c2;
@green: #52c41a;
@lightRed: #fa541c;
@red: #f5222d;
.ant-col {
  margin-bottom: 20px;
  display: flex;
  align-items: center;

  .label {
    flex-shrink: 0;
    width: 86px;
    text-align: right;
    font-size: 14px;
    color: #595959;
  }

  .w-full {
    flex: 1;
  }
}

.order-table {
  /deep/ .ant-table {
    .ant-table-tbody > tr > td {
      padding: 16px 8px;
      color: #333;
    }
  }
}

.text-333 {
  color: #333;
}

.tag {
  margin-right: 7px;
  padding: 4px;
  line-height: 1;
  border-radius: 3px;
  font-size: 12px;
  color: #ffffff;
  font-weight: normal;

  &.orange-bg {
    background-color: #ff6600;
  }

  &.grey-bg {
    background-color: #929292;
  }
}

.vehicle-num {
  display: inline-block;
  padding: 4px;
  font-size: 12px;
  line-height: 1;
  color: #fff;
  border-radius: 3px;
}

.orange-color {
  color: #ff6600;
}

.text-666 {
  color: #666;
}

.text-gray {
  color: #999;
}

.order-status {
  &-0 {
    color: @red;
  }

  &-2 {
    color: @blue;
  }

  &-3 {
    color: @orange;
  }

  &-4 {
    color: @lightCyan;
  }

  &-5 {
    color: @green;
  }
}

.title {
  display: flex;
  align-items: center;

  .dot {
    width: 4px;
    height: 4px;
    margin: 0 8px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.65);
  }
}

.text-orange {
  color: @orange;
}

.bg-orange {
  background: @orange;
}

.text-blue {
  color: @blue;
}

.bg-blue {
  background: @blue;
}

.text-purple {
  color: @purple;
}

.bg-purple {
  background: @purple;
}

.text-lightRed {
  color: @lightRed;
}

.bg-lightRed {
  background: @lightRed;
}

.text-red {
  color: @red;
}

.bg-red {
  background: @red;
}

.vendor-logo {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center 0;
  border: 1px solid #e1e1e1;
}

/deep/ .ant-table-thead > tr > th,
/deep/ .ant-table-tbody > tr > td {
  padding: 8px;
}

/deep/ .ant-table-body {
  overflow: auto !important;
}

/*/deep/ .ant-tabs {*/
/*  .ant-tabs-content {*/
/*    padding: 10px 24px 0;*/
/*    min-height: calc(100vh - 480px);*/
/*    max-height: calc(100vh - 420px);*/
/*    overflow: auto*/
/*  }*/

/*  .ant-tabs-tab {*/
/*    margin-right: 20px;*/
/*  }*/

/*  .ant-tabs-nav-container {*/
/*    font-size: 16px;*/
/*  }*/
/*}*/
</style>
